<template>
   <div class="right-column">
      <panel :options='rightColumnOptions1'>
         <template #title><span>柱形图-技能掌握</span></template>
      </panel>
      <panel :options='rightColumnOptions2'>
         <template #title><span>折线图-播放量</span></template>
      </panel>
      <panel :options='rightColumnOptions3'>
         <template #title><span>饼状图-地区分布</span></template>
      </panel>
   </div>
</template>

<script>
   import Panel from 'components/common/Panel'
   import {
      rightColumnOptions1,
      rightColumnOptions2,
      rightColumnOptions3
   } from '@/utils/options'
   export default {
      name: 'rightColumn',
      components: {
         Panel
      },
      data() {
         return {
            rightColumnOptions1,
            rightColumnOptions2,
            rightColumnOptions3
         }
      }
   }
</script>

<style lang='less' scoped>
   .right-column {
      height: 90%;
      flex: 3;
   }
</style>